<!--申请仲裁-->
<script lang="ts" setup>
import { isNonNullStr } from "@@/utils/tools/is";
import {
  apiTaskApplyArbitrate,
  ApiTaskDetails,
  ApiTaskApplyArbitrate,
} from "@@/api/wk/index";
import { FormInstance } from "vant";
import { CinputImage } from "@@/components/common/CinputImages/index";
import { uploadImages } from "@@/api/module/upload";
import { useRactionSheetRef } from "@@/components/rework/RactionSheet/index";
import { sdkWkTransfer } from "@@/sdk/web3Eth";
import { toast } from "@@/hooks/vantHooks";
import useBalanceStore from "@@/store/useBalanceStore";
import useTabPageStore from "@@/store/useTabPageStore";
import { chain } from "mathjs";

const balanceStore = useBalanceStore();

const props = defineProps<{
  details: ApiTaskDetails.Data;
  refresh: () => void;
}>();
const { t } = useI18n();

const btnLoading = reactive({
  submit: false,
});
const WKC = computed(() => balanceStore.getCoinByCode("wkc"));
const tabPageStore = useTabPageStore();

const form = reactive<ApiTaskApplyArbitrate.Req>({
  title: "",
  images: "",
  task_id: props.details.id,
  txid: "",
});
let images: CinputImage[] = [];

async function play() {
  toast.loading();
  await tabPageStore.getHomeData();
  toast.close();
  const appeal_fees = props.details.arbitrate.appeal_fees;
  const homeData = tabPageStore.homeData;
  const coin = WKC.value;
  if (!coin || !homeData) {
    const msg = t("shu-ju-yi-chang-qing-chong-shi");
    toast.error(msg);
    return Promise.reject(msg);
  }
  const toAddress = homeData.address.safe_address;
  /**本金 */
  const capital = Number(props.details.capital);
  /**佣金 */
  const commission = Number(props.details.commission);
  const amount = chain(capital).add(commission).multiply(appeal_fees).done();
  toast.loading(t("jiao-yi-zhong-qing-bu-yao-tui-chu"));
  const res = await sdkWkTransfer(
    coin.contract_addr!,
    amount,
    coin.format,
    toAddress
  );
  toast.close();
  if (!res.status) {
    toast.error(res.message);
    return Promise.reject(res.message);
  }
  return res.data!;
}

async function submit() {
  form.txid = await play();
  btnLoading.submit = true;
  form.images = await uploadImages(images).catch(() => {
    btnLoading.submit = false;
    return Promise.reject();
  });
  const res = await apiTaskApplyArbitrate(form);
  btnLoading.submit = false;
  if (!res) return;
  RactionSheetRef.value?.close();
  props.refresh();
}

function open() {
  RactionSheetRef.value?.open({
    title: t("shen-qing-zhong-cai"),
  });
}
/**申请仲裁 */
const RactionSheetRef = useRactionSheetRef();
/**申请仲裁 */
const vanFormRef = ref<FormInstance>();
</script>
<template>
  <!-- 申请仲裁 -->
  <RactionSheet
    :close-on-click-overlay="!btnLoading.submit"
    ref="RactionSheetRef"
  >
    <VanDivider />
    <div class="PD-md">
      <van-form @submit="submit" ref="vanFormRef">
        <div class="auto-MT-md">
          <div class="C-T4">{{ $t("shuo-ming") }}</div>
          <Ccard class="MT-xs PD-sm">
            <Rinput
              v-model="form.title"
              required
              :placeholder="$t('qing-tian-xie-gai-zi-duan')"
              :type="'textarea'"
              :autosize="{ minHeight: 0, maxHeight: 200 }"
              maxlength="256"
              showWordLimit
              :rules="[
                {
                  validator: isNonNullStr,
                  message: $t('qing-tian-xie-gai-zi-duan'),
                },
              ]"
            />
          </Ccard>
          <div class="C-T4">{{ $t("tianJiaPingZheng") }}</div>
          <CinputImages
            class="MT-sm"
            @change="(e) => (images = e)"
            :maxLength="3"
          />
        </div>
      </van-form>
      <Rbutton
        class="MT-md"
        @click="vanFormRef?.submit()"
        :loading="btnLoading.submit"
        :size="'large'"
        bg="var(--C-LG1)" borderStyle="none"
      >
        {{ $t("shen-qing-zhong-cai") }}
      </Rbutton>
    </div>
  </RactionSheet>
  <Rbutton
    v-if="details.task_progress.length"
    @click="open"
    :size="'large'"
    bg="var(--C-M1-O2)"
    class="C-T1"
  >
    {{ $t("shen-qing-zhong-cai") }}
  </Rbutton>
</template>
<style lang="scss" scoped></style>
